<template>
  <nav-container class="lower-level-center" :nav="nav">
    <router-view></router-view>
  </nav-container>
</template>

<script>

  import {childCountApi as getApi} from '@/services/api/low-level';

  import {getCommand} from '@/build';

  export default {

    name: "lower-level-center",

    mixins: [getCommand],

    data() {
      return {
        info: {},
        nav: [
          {
            title: "下级会员",
            to: {
              name: 'lower-level'
            }
          },
          {
            title: "下级代理",
            to: {
              name: 'lower-agent'
            }
          },
          {
            title: "新增下级代理账户",
            to: {
              name: 'lower-account'
            }
          }
        ]
      };
    },

    watch: {
      info(info) {
        this.nav[0].title = `下级会员（${info.member}）`;
        this.nav[1].title = `下级代理（${info.proxy}）`;
      }
    },

    mounted() {
      this.bindGet(getApi, 'info');

      this.getAll();

      this.$global.bus.$on('update:child-count',() => {
        this.getAll();
      })
    },

    beforeDestroy() {
      this.$global.bus.$off('update:child-count');
    }
  };
</script>
